<!-- ------------------------------------------------------------------------- -->
<!-- ---------------------------------关联次密接人员信息---------------------------------------- -->
<template>
  <div class="box">
      <div class="form-box">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-row>
                  <el-col :span="8">
                      <div class="grid-content ep-bg-purple" />
                      <el-form-item size="large">
                          <div class="form-text">姓名:</div>
                          <el-input v-model="formInline.user" placeholder="请输入" style="width: 350px"  />
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <div class="grid-content ep-bg-purple-light" />
                      <el-form-item size="large">
                          <div class="form-text">性别:</div>
                          <el-select v-model="formInline.sex" placeholder="请选择" style="width: 350px">
                              <el-option label="男" value="男" />
                              <el-option label="女" value="女" />
                          </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <div class="grid-content ep-bg-purple" />
                      <el-form-item size="large">
                          <div class="form-text">身份证号:</div>
                          <el-input v-model="formInline.idNum" placeholder="请输入" style="width: 350px" />
                      </el-form-item>
                  </el-col>
              </el-row>

              <el-row>
                  <el-col :span="24">
                      <div class="grid-content ep-bg-purple-dark" />
                      <el-form-item size="large">
                          <div class="form-text">联系电话:</div>
                          <el-input v-model="formInline.phone" placeholder="请输入" style="width: 350px" />
                      </el-form-item>
                  </el-col>
              </el-row>

              <el-form-item size="large">
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                  <el-button @click="onSubmit">重置</el-button>
              </el-form-item>
          </el-form>
      </div>


      <!-- 表格 -->
      <div class="table-box">
          <el-table :data="table" border style="width: 100%">
              <el-table-column prop="id" label="序号" width="100" align="center" />
              <el-table-column prop="name" label="姓名" width="100" align="center" />
              <el-table-column prop="sex" label="性别" align="center" />
              <el-table-column prop="age" label="年龄" align="center" />
              <el-table-column prop="idNum" label="身份证号/护照号" align="center" />
              <el-table-column prop="phoneNum" label="联系方式" align="center" />
              <el-table-column prop="address" label="现住住址" align="center" />
              <el-table-column prop="jointType" label="类型" align="center" />
              <el-table-column label="操作" width="100">
                  <template #default>
                      <el-button link type="primary" size="small">查看详情</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </div>

      <!-- 分页 -->
      <div class="table-footer">
          <div class="demo-pagination-block">
              <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[6, 20, 25, 30]"
                  :background="background" layout="total,  prev, pager, next,sizes, jumper" :total="total"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
      </div>
  </div>
  <div class="exit" @click="exit">
      <el-button>返回</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive,toRefs, onMounted } from "vue";
import { useRouter,useRoute } from "vue-router";
import axios from '@/util/http'
export default defineComponent({
  name: 'DetailAssociated',
  setup() {
    const Table = reactive({
        table:[]
    })
      // 分页器
      let currentPage = ref(1)
      let pageSize = ref(6)
      let background = ref(true)
      let total = ref(10)
      const patientId =useRoute().query.id
      const handleSizeChange = (val: number) => {
          console.log(`${val} items per page`)
      }
      const handleCurrentChange = (val: number) => {
          console.log(`current page: ${val}`)
      }

      const formInline = reactive({
          user: "",
          sex: "",
          idNum:'',
          phone:''
      });

      const  onSubmit = async () => {
          await axios({
            method:'post',
            url:`patient/findClosePatientByCondition?currentPage=${currentPage.value}&pageSize=${pageSize.value}`,
            data:{
                'name':formInline.user,
                'sex':'男',
                'idCard':formInline.idNum,
                'phoneNum':formInline.phone
            }
          }).then((res)=>{
            console.log(res)
            Table.table = res.data.data
          })
      };
      const tableData = [
          {
              id: "1",
              name: "Tom",
              sex: "男",
              age: "15",
              postId: "510124",
              tel: "135",
              address: "成都",
          },
          {
              id: "2",
              name: "Tom",
              sex: "男",
              age: "15",
              postId: "510124",
              tel: "135",
              address: "成都",
          },
          {
              id: "3",
              name: "Tom",
              sex: "男",
              age: "15",
              postId: "510124",
              tel: "135",
              address: "成都",
          },
          {
              id: "4",
              name: "Tom",
              sex: "男",
              age: "15",
              postId: "510124",
              tel: "135",
              address: "成都",
          },
          {
              id: "5",
              name: "Tom",
              sex: "男",
              age: "15",
              postId: "510124",
              tel: "135",
              address: "成都",
          },
          {
              id: "6",
              name: "Tom",
              sex: "男",
              age: "15",
              postId: "510124",
              tel: "135",
              address: "成都",
          },
      ];
      onMounted(async()=>{
        await axios({
            method:'get',
            url:'patient/findAllSysContact',
            params:{
                currentPage:currentPage.value,
                pageSize:pageSize.value
            }
        }).then((res)=>{
            Table.table = res.data.data
        })
      })
      // 返回
      const router = useRouter();
      const exit = ()=>{
          router.push('/ManagementOfConfidentialPersonnel')
      }
      return { currentPage, pageSize, background, total, handleSizeChange, handleCurrentChange, formInline, onSubmit, tableData,exit ,...toRefs(Table)};
  },
});
</script>

<style scoped lang="less">
.box {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.img {
  border-width: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 88px;
  height: 109px;
}

.text {
  color: white;
  position: absolute;
  top: 32px;
  right: -8px;
  transform: rotate(53deg);
}
.form-box {
  width: 90%;
  padding-top: 50px;
}

.form-text {
  width: 80px;
}

.btn-box {
  width: 90%;
  display: flex;
}

.table-box {
  width: 90%;
  display: flex;
  padding-top: 40px;
}

.table-footer {
  width: 90%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 返回按钮 */
.exit {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-button {
  width: 95px;
  height: 40px;
  font-size: 13px;
}
</style>
